import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Platform,
  StatusBar,
  TouchableOpacity,
  FlatList,
} from "react-native";
import { FontAwesome } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Octicons } from "@expo/vector-icons";

const UserCard = ({ item, onPress }) => {
  return (
    <TouchableOpacity
      onPress={() => onPress()}
      style={{
        flexDirection: "row",
        // width: "90%",
        padding: 8,
        backgroundColor: "#fff",
      }}
    >
      <View>
        <FontAwesome
          name="user-circle-o"
          size={33}
          color="#aaa"
          style={{ padding: 10 }}
        />
      </View>
      <View style={{ marginTop: 8, marginLeft: 5 }}>
        <Text style={{ fontWeight: "bold" }}>{item.name}</Text>
        <View style={{ flexDirection: "row" }}>
          <View
            style={{
              flexDirection: "row",
              width: "86%",
            }}
          >
            <View style={{ flexDirection: "row", width: 80 }}>
              <MaterialIcons
                name="group"
                size={15}
                color="#aaa"
                style={{ marginTop: 5, marginRight: 4 }}
              />
              <Text style={{ marginTop: 3, fontSize: 13 }}>{item.group}</Text>
            </View>
            <View style={{ flexDirection: "row" }}>
              <MaterialCommunityIcons
                name="file-star"
                size={14}
                color="#aaa"
                style={{ marginTop: 5, marginRight: 4 }}
              />
              <Text style={{ marginTop: 3, fontSize: 13 }}>
                {item.reportNumber}
              </Text>
            </View>
          </View>

          <Octicons name="chevron-right" size={18} color="#aaa" />
        </View>
      </View>
    </TouchableOpacity>
  );
};

var styles = StyleSheet.create({
  container: {
    height: "100%",
    backgroundColor: "#fff",
  },
});

export default UserCard;
